<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab切换</title>
    <style>

        ul li{
            list-style: none;
            float: left;
            margin-left: 30px;
        }

        .div{
            width: 300px;
            height: 200px;
            clear: left;
        }

        .d1{
            background-color: cadetblue;
            
        }

        .d2{
            background-color: lightcoral;
            display: none
        }

        .d3{
            background-color: lightblue;
            display: none
        }

    </style>
</head>
<body>
    <ul>
        <li style="color: cadetblue">tab1</li>
        <li style="color: lightcoral">tab2</li>
        <li style="color: lightblue">tab3</li>
    </ul>
    <div class="div d1"></div>
    <div class="div d2"></div>
    <div class="div d3"></div>
    <br>
</body>
</html>
<script src="../js/jquery-1.11.0.min.js"></script>
<script>
    $("li").click(function(){
        //获取li的下标
        let index = $(this).index();
        console.log(index)
        //将与下标匹配的div隐藏起来hide()   show()显示出来
        $(".div").hide()
        $("div").eq(index).toggle();
    })
</script>